<!--
 * @Author: 秦福凯
 * @LastEditTime: 2025-01-24 16:45:17
 * @Description: 
-->

<template>
  <div class="wrapper">
    <v-header />
    <v-sidebar />
    <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
      <v-tabs></v-tabs>
      <div class="content">
        <router-view v-slot="{ Component,route }">
          <keep-alive :include="tabs.nameList">
           <component :is="Component" :key="route.path"></component>
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useSidebarStore } from '@/store/sidebar.js';
import { useTabsStore } from '@/store/tabs';
import VHeader from '@/components/header.vue';
import VSidebar from '@/components/common/Menu/sidebar.vue';
import VTabs from '@/components/tabs.vue';
import {watch} from "vue";

if(localStorage.getItem('subSystem')){
  let subSystem = JSON.parse(localStorage.getItem('subSystem'));
  sessionStorage.setItem('subSystem', JSON.stringify(subSystem));
  localStorage.removeItem('subSystem');
}

const sidebar = useSidebarStore();
const tabs = useTabsStore();
watch(tabs,()=>{
},{deep:true})

</script>

<style>
.wrapper {
    height: 100vh;
    overflow: hidden;
}
.content-box {
    position: absolute;
    left: 240px;
    right: 0;
    top: 70px;
    bottom: 0;
    padding-bottom: 30px;
    -webkit-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
    background: #eef0fc;
    overflow: hidden;
    /* 设置高度 */
    height: calc(100vh - 70px);
}

.content {
  width: auto;
  height: 100%;
  padding: 12px;
  overflow-y: auto;
  box-sizing: border-box;
  overflow: hidden;
  /* background: #F5F7F6; */
  background-color: var(--el-bg-color-page);
}

.content::-webkit-scrollbar {
    width: 0;
}

.content-collapse {
    left: 65px;
}
</style>
